<template>
  <view style="padding-bottom: '40rpx'">
    <uv-navbar
      title="工单管理"
      placeholder
      bg-color="#fff"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    />
    <!-- #ifdef APP-PLUS -->
    <g-tabs
      :tabs="tabList"
      class="tabBox"
      :customNavHeight="72"
      :active="active"
      @change="changeTab"
    >
      <template #right>
        <view class="filter-btn" @click="rightClick">
          <uv-icon
            :name="iconFunnel"
            label="筛选"
            size="28rpx"
            label-color="#4EA770"
            label-size="24rpx"
          />
        </view>
      </template>
    </g-tabs>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <g-tabs :tabs="tabList" class="tabBox" :active="active" @change="changeTab">
      <template #right>
        <view class="filter-btn" @click="rightClick">
          <uv-icon
            :name="iconFunnel"
            label="筛选"
            size="28rpx"
            label-color="#4EA770"
            label-size="24rpx"
          />
        </view>
      </template>
    </g-tabs>
    <!-- #endif -->
    <view
      class="list ss-r-20 ss-size ss-shadow ss-font-28"
      v-for="(i, index) in dataList"
      :key="index"
      @click="handleDetail(i)"
    >
      <view class="list_t ss-p-24">
        <uv-tags v-if="i.type == 1" text="急" type="error" size="mini" style="margin-right: 10rpx" />
        <text>{{ i.title }}</text>
      </view>
      <view class="list_box ss-grey-1 ss-p-24">
        <view class="ss-m-y-10"> 发起时间：{{ i.createTime }} </view>
        <view class="ss-m-y-10"> 处理人员：{{ i.maintenanceUserNickName }} </view>
        <view class="ss-flex ss-grey-2 ss-font-26 ss-m-y-10 ss-m-y-20">
          <uv-icon
            :name="
              [3, 9, 11, 14].includes(i.status)
                ? iconReturn
                : i.status == 7
                ? iconEnd
                : iconUntreated
            "
            size="32rpx"
            :label="
              [1, 2, 3, 4, 9, 11, 12].includes(i.status)
                ? '待发布'
                : [5, 8, 14].includes(i.status)
                ? '维修中'
                : [6, 13].includes(i.status)
                ? '待复验'
                : i.status == 7
                ? '已完结'
                : i.status == 10
                ? '待接单'
                : '--'
            "
            label-color="#757575"
            label-size="24rpx"
          />
          <uv-icon
            :name="iconMember"
            size="32rpx"
            :label="i.createByNickName"
            label-color="#757575"
            label-size="24rpx"
            style="margin-left: 40rpx"
          />
        </view>
      </view>
    </view>
    <uv-load-more v-if="dataList.length > 0" :status="status" line />
    <uv-empty v-else margin-top="20vh" :icon="empty" text="暂无工单" />
    <uv-gap height="40rpx" />
    <uv-popup ref="popupRef" mode="right" z-index="980" closeable>
      <view class="popup-content">
        <uv-status-bar />
        <uv-text
          text="数据筛选"
          color="#757575"
          size="28rpx"
          line-height="100rpx"
          margin="auto 30rpx"
        />
        <uv-text
          text="工单类别"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="row">
          <view
            class="row-btn"
            v-for="(i, k) in typeList"
            :key="k"
            :class="{ active: i.value == queryParams.type }"
            @click="changeType(i)"
          >
            {{ i.label }}
          </view>
        </view>
        <uv-text
          text="排序方式"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="row">
          <view
            class="row-btn"
            v-for="(i, k) in sortList"
            :key="k"
            :class="{ active: i.value == queryParams.sort }"
            @click="changeSort(i)"
          >
            {{ i.label }}
          </view>
        </view>
        <view class="row-bottom">
          <uv-button text="重置" @click="resetQuery" />
          <uv-button
            text="确定"
            color="#fff"
            :custom-style="{
              background: '#4EA770',
            }"
            @click="handleQuery"
          />
        </view>
      </view>
    </uv-popup>
  </view>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import { getOrderList } from "@/request/order.js";
import { getStatistics } from "@/request/home";

import iconUntreated from "@/static/order/icon_untreated.png";
import iconReturn from "@/static/order/icon_return.png";
import iconEnd from "@/static/order/icon_end.png";
import iconMember from "@/static/icon_member.png";
import iconFunnel from "@/static/icon_funnel.png";
import empty from "@/static/empty.png";

const active = ref(0); // 当前tab
const tabList = ref([
  // 状态列表
  { value: 5, label: "待处理" },
  { value: -2, label: "进行中" },
  { value: 8, label: "被退回", badge: { isDot: false } },
  { value: 7, label: "已完结" },
]);
const queryParams = reactive({
  status: 5, // 状态
  sort: "asc", // 排序 asc 升序 desc 降序
  type: null, // 工单类别
  pageNum: 1, // 页码
  pageSize: 10, // 条数
});
const total = ref(0); // 总条数
const status = ref("loadmore"); // 加载状态
const dataList = ref([]); // 工单列表
const popupRef = ref(); // 弹出层ref
const typeList = ref([
  { label: "全部", value: null },
  { label: "加急工单", value: "1" },
  { label: "普通工单", value: "2" },
]); // 工单类别
const sortList = ref([
  { label: "升序", value: "asc" },
  { label: "降序", value: "desc" },
]); // 排序方式

onMounted(() => {
    getUnTaskCount();
  getList();
});

onShow(() => {
  setTimeout(() => {
    getUnTaskCount();
    getList();
  }, 100);
});

onPullDownRefresh(() => {
  queryParams.pageNum = 1;
  getList();
});

onReachBottom(() => {
  if (total.value > dataList.value.length) {
    queryParams.pageNum += 1;
    getList();
  }
});

// 获取工单列表
const getList = () => {
  status.value = "loading";
  getOrderList(queryParams)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
    });
};

// 工单详情
const handleDetail = (item) => {
  uni.navigateTo({
    url: "/pages/Order/orderTitle?id=" + item.id,
  });
};

// 切换工单状态
const changeTab = (val) => {
  queryParams.status = val.value;
  active.value = val.index;
  queryParams.pageNum = 1;
  getList();
};

// 打开筛选弹窗
const rightClick = () => {
  popupRef.value.open();
};

// 切换工单类型
const changeType = (val) => {
  queryParams.type = val.value;
};

// 排序
const changeSort = (val) => {
  queryParams.sort = val.value;
};

// 重置查询
const resetQuery = () => {
  queryParams.sort = "asc";
  queryParams.type = null;
  queryParams.pageNum = 1;
  popupRef.value.close();
  getList();
};

// 确认查询
const handleQuery = () => {
  popupRef.value.close();
  queryParams.pageNum = 1;
  getList();
};

// 获取退回工单数量
const getUnTaskCount = () => {
  getStatistics().then((res) => {
    if (res.code == 200) {
      const { returnWorkOrderNum } = res.data;
      tabList.value[2].badge = { isDot: returnWorkOrderNum > 0 };
    }
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";
.tabBox {
  box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.1);
  border-top: 2rpx solid gainsboro;
}
.list {
  width: 90%;
  margin: 30rpx auto;
  overflow: hidden;

  .list_t {
    background-image: linear-gradient(to right, #e7f6ed, #dff0f7);
    display: flex;
    align-items: center;
  }
}
.filter-btn {
  width: 120rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  width: 600rpx;
  height: 100%;
  position: relative;
  .row {
    display: grid;
    gap: 20rpx;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    &-btn {
      width: 160rpx;
      height: 66rpx;
      border-radius: 8rpx;
      background-color: #fff;
      border: 2rpx solid #dedede;
      font-size: 28rpx;
      color: #757575;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: #fff;
      background-color: #4ea770;
      border: 2rpx solid #4ea770;
    }
  }
  .row-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    view {
      flex: 1;
    }
  }
}
:deep(.uv-popup__content__close--top-right) {
  top: calc(15px + var(--status-bar-height)) !important;
}
</style>
